<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre>
        fetch基于Promise用于取代xhr，xhr的升级版


        post和put的区别
              post用来向后台发送参数，数据，添加功能，用户名登录
              put用来更新，编辑数据
        json格式参数和字符串的参数区别
            1：json格式参数需要使用JSON.stringify转换
            2：二种格式请求头也不一样
                json   application/json
                字符串  application/x-www-form-urlencoded

        后台返回json数据前台接收可以处理
            data.text() -- 后台返回的数据处理成标准字符串类型
            data.json() -- 后台返回数据处理成标准json格式

      </pre
    >
    <script>
      // 传统接口规范
      fetch('http://www.liulongbin.top:3006/api/getbooks?id=1', {
        method: 'get',
      })
        .then((data) => {
          return data.text()
        })
        .then((val) => {
          console.log(val)
        })

      // restful接口规范：只和请求方式有关和请求地址无关
      //   标准字符串类型发送
      fetch('http://localhost:3000/books', {
        method: 'post',
        body: 'uname=hh&pwd=123456',
        headers: {
          'Content-type': 'application/x-www-form-urlencoded',
        },
        //headers默认什么都没有
      })
        .then((data) => {
          return data.text()
        })
        .then((val) => {
          console.log(val)
        })
      //   fetch('http://localhost:3000/books', {
      //     methods: 'post',
      //     body: 'uname=fetch&pwd=1243',
      //     headers: {
      //       'Content-type': 'application/x-www-form-urlencoded',
      //     },
      //   })
      //     .then((data) => {
      //       return data.text()
      //     })
      //     .then((val) => {
      //       console.log(val)
      //     })

      //put使用json格式发送
      //   fetch('http://localhost:3000/books/12', {
      //     method: 'put',
      //     body: JSON.stringify({ uname: 'hh', pwd: '123456' }),
      //     headers: {
      //       'Content-type': 'application/json',
      //     },
      //     //headers默认什么都没有
      //   })
      //     .then((data) => {
      //       return data.text()
      //     })
      //     .then((val) => {
      //       console.log(val)
      //     })
    </script>
  </body>
</html>
